// useEffect 渲染结束 可以使用ref获取dom

// 第二个参数：
// 1.没有，初始渲染+组件更新
// 2.空数组，初始渲染
// 3.特定依赖项，初始渲染 + 特定依赖项变化

// useEffect清除副作用，返回一个函数，此函数会在组件卸载时触发
import { useEffect, useRef, useState } from "react";

const URL = "http://geek.itheima.net/v1_0/channels";

const Son = () => {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("This is son");
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);
  return <div>This is son</div>;
};

function App() {
  const inputRef = useRef(null);
  const [showSon, setShowSon] = useState(true);
  const [list, setList] = useState([]);
  useEffect(() => {
    getList();
  }, []);
  const getList = async () => {
    const res = await (await fetch(URL)).json();
    setList(res.data.channels);
  };
  return (
    <div className="App">
      <h1>useEffect</h1>
      <input type="text" ref={inputRef} />
      <ul>
        {list.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      {showSon && <Son />}
      <button onClick={() => setShowSon(!showSon)}>卸载Son</button>
    </div>
  );
}

export default App;
